/**
 *
 Props:
 text - (string) - loading text
 textStyle - (object) - loading text style
 pointerEvents - (bool) - loading can click on the bottom of the content, default is false
 bottomStyle - (object) - loading the bottom cover background style
 loadingStyle - (object) - loading background style
 timeout - (number) - loading timeout, default none
 onLoadingTimeout - (function) - loading timeout callback

 Method:
 show(text:string, pointerEvents:bool) - show loading
 dismiss() - dismiss loading
 isShown() - return loading is showed
 setLoadingOffset(x:number, y:number) - set loading offset
 setLoadingTimeout(timeout:number, onLoadingTimeout:function) - set loading timeout and timeout callback
 clearLoadingTimeout() - clear loading timeout
 */

import React, { PureComponent } from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  ActivityIndicator,
	Text,
	Platform
} from 'react-native';
// npm install --save prop-types
import PropTypes from 'prop-types';

// 获取屏幕宽度和高度
const { width: SCREEN_WIDTH } = Dimensions.get('window');
const { height: SCREEN_HEIGHT } = Dimensions.get('window');

/**
 * 加载组件
 */
class Loading extends PureComponent {
	// 设置默认的加载进度条宽高
  static LOADING_WIDTH = SCREEN_WIDTH * 0.2;
  static LOADING_HEIGHT = SCREEN_HEIGHT * 0.1;

  // static defaultProps = {
  //   pointerEvents: false,
  //   timeout: 0,
  // };

  constructor(props) {
    super(props);
    this.isShown = false;
    this.state = {
      loading: (<View />),
    };
    this.offsetX = 0;
    this.offsetY = 0;
    this.timeout = props.timeout;
    this.onLoadingTimeout = props.onLoadingTimeout;
    this.timeoutEvent = undefined;
  }

  render() {
    return this.state.loading;
  }

  show(text, pointerEvents) {
  	// 判断是否显示
    if (!this.isShown) {
      if (typeof (text) === 'boolean') {
        pointerEvents = text;
        text = '';
      }
      text = text || this.props.text;
      this.setState({
        loading: this._getLoading({
          ...this.props,
          text: text,
          pointerEvents: pointerEvents
        })
      });
      if (this.timeout > 0) {
        this.timeoutEvent = setTimeout(() => {
          if (this.isShown) {
            this.dismiss();
            this.onLoadingTimeout && this.onLoadingTimeout();
          }
        }, this.timeout);
      }
      this.isShown = true;
    }
  }
	
	/**
	 * 取消显示
	 */
  dismiss() {
    if (this.isShown) {
      this.setState({
        loading: (<View />)
      });
      this.isShown = false;
      this.timeoutEvent && clearInterval(this.timeoutEvent);
    }
  }

  setLoadingOffset(x, y) {
    this.offsetX = x;
    this.offsetY = y;
    return this;
  }

  setLoadingTimeout(timeout, onLoadingTimeout) {
    this.timeout = timeout;
    this.onLoadingTimeout = onLoadingTimeout;
    return this;
  }

  clearLoadingTimeout() {
    this.timeout = 0;
    this.onLoadingTimeout = undefined;
  }
	
	/**
	 * 判断是否显示
	 * true：显示；false：不显示
	 */
  isShown() {
    return this.isShown;
  }
	
	/**
	 * 显示加载中...
	 * @param props
	 * @return {*}
	 * @private
	 */
  _getLoading(props) {
    const offsetStyle = {};
    // 判断偏移量
    if (this.offsetY !== 0 || this.offsetX !== 0) {
    	// 设置显示位置
      offsetStyle.top = SCREEN_HEIGHT / 2 + this.offsetY / 2 - Loading.LOADING_HEIGHT / 2 - this.props.offsetY;
      offsetStyle.left = SCREEN_WIDTH / 2 + this.offsetX / 2 - Loading.LOADING_WIDTH / 2;
    } else {
      offsetStyle.top = SCREEN_HEIGHT / 2 - Loading.LOADING_HEIGHT / 2 - this.props.offsetY;
    }
    return (
      <View pointerEvents={!!props && props.pointerEvents ? 'none' : 'auto'} style={styles.container}>
        <View pointerEvents={'none'} style={[styles.loadingBackground, props.bottomStyle]} />
        <View style={[styles.loadingBody, offsetStyle, props.loadingStyle]}>
          <ActivityIndicator
            animating={true}
            color="white"
            style={styles.centering}
            size="small"
          />
          <Text style={[styles.loadingText, props.textStyle]}>
            {!!props && props.data ? props.data : '加载中...'}
          </Text>
        </View>
      </View>
    );
  }

}

/**
 * 设置样式
 */
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT
  },
  loadingBackground: {
    position: 'absolute',
    top: 0,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  },
  loadingBody: {
    width: Loading.LOADING_WIDTH,
    height: Loading.LOADING_HEIGHT,
    position: 'absolute',
    top: SCREEN_HEIGHT / 2 - Loading.LOADING_HEIGHT / 2,
    left: SCREEN_WIDTH / 2 - Loading.LOADING_WIDTH / 2,
    borderRadius: 5,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  loadingText: {
    color: 'white',
    backgroundColor: 'transparent'
  },
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    width: 40
  }
});

Loading.propTypes = {
  text: PropTypes.string,
  textStyle: PropTypes.any,
  pointerEvents: PropTypes.bool,
  bottomStyle: PropTypes.any,
  loadingStyle: PropTypes.any,
  timeout: PropTypes.number,
  onLoadingTimeout: PropTypes.func,
  offsetY: PropTypes.number,
};

Loading.defaultProps = {
  pointerEvents: false,
  timeout: 0,
  offsetY: Platform.OS === 'ios' ? 64 : 54,
};

/**
 * 导出当前Module
 * @type {Loading}
 */
module.exports = Loading;
